<template>
  <div ref="pieChart" class="container-content"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'EfficiencyChart',
  components: {},
  data () {
    return {}
  },
  props: {
    userTaskInfo: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  computed: {
    chartData () {
      const { completeTaskCount, completeWithOverTimeTaskCount, notCompleteTaskCount } = this.userTaskInfo
      return [
        { name: '完成', value: completeTaskCount },
        { name: '超时', value: completeWithOverTimeTaskCount },
        { name: '未完成', value: notCompleteTaskCount }
      ]
    }
  },

  mounted () {},
  watch: {
    // userTaskInfo (val) {
    //   this.initChart()
    // }
    userTaskInfo: {
      deep: true,
      handler: function () {
        this.initChart()
      }
    }
  },
  methods: {
    initChart () {
      let myChart = echarts.init(this.$refs.pieChart)
      let option = {
        color: ['#41DEC5', '#FBB31A', '#FB5F1A'],
        legend: {
          show: false
        },
        title: {
          text: '总巡检',
          subtext: this.userTaskInfo.taskCountForTotal,
          x: 'center',
          y: '25%',
          textStyle: {
            color: '#6F6F8C',
            fontSize: 12
          },
          subtextStyle: {
            color: '#6F6F8C',
            fontSize: 16,
            fontWeight: 600
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['60%', '100%'],
            hoverAnimation: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#ffffff'
            },
            data: this.chartData
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
.container-content {
  width: 100%;
  height: 100%;
}
</style>
